<template>
  <div class="box">
    <div class="title">{{ compInfo.title }}</div>
    <div class="c-box">
      <div
        class="p-box"
        v-for="(item, index) in compInfo.content"
        :key="index"
        @click="goUrl(item.pathUrl)"
      >
        <img class="p-img" :src="item.img" alt="" />
        <div class="bottom-box">
          <div class="p-tit">{{ item.title }}</div>
          <div class="r-icon">></div>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
type Tcontent = {
  img: string;
  pathUrl: string;
  title: string;
};
type TcompInfo = {
  title: string;
  content: Tcontent[];
};
defineProps<{ compInfo: TcompInfo }>();
// 去详情页面
const goUrl = (url: string) => {
  if (url.indexOf("http") > -1) {
    window.open(url);
  } else {
    navigateTo({ path: url });
  }
};
// const goDetail = (id: string) => {
//   navigateTo({ path: `/prodetail/${id}` });
// };
</script>
<style lang="stylus" scoped>
.box{
  width:1080px;
  padding 48px 22px
  box-sizing:border-box
  margin 0 auto
  .title{
    text-align: center;
    font-size: 30px;
    margin-bottom 31px
    opacity .9
  }
  .c-box{
    display: flex;
    justify-content: space-between;
    align-items: center;
    .p-box{
      cursor pointer
      position relative
      width 246px
      height 430px
      background #c0c0c0
    }
    .p-img{
      position absolute
      top 0
      width 246px
    }
    .bottom-box{
      position absolute
      top 350px
      left 19px
      width 206px
      z-index 2
      color: #FFFFFF;
      display flex;
      justify-content space-between;
      align-items center
    }
    .p-tit{
      width 155px
      font-size: 21px;
    }
    .r-icon{
      font-size: 21px;
    }
  }
}
</style>
